<template>
  <div>测试</div>
  <component :is="custom"></component>
  <button @click="add">操作</button>
</template>
<script>
import custom from './components/custom_props.vue'
import { h, render, ref } from 'vue'
let obj = {
  title: ref('helloworld')
}
export default {
  components: {},
  data() {
    return {
      custom: null
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      obj.title.value = +new Date()
    }
  },
  mounted() {
    console.log(`helloworld`)
    this.custom = h(custom, obj)

    let vnode = h(
      'div',
      {
        style: {
          border: '1px solid #000'
        }
      },
      [
        h(
          'div',
          {
            style: {
              color: 'red'
            }
          },
          [
            h(
              'div',
              {
                style: {
                  color: 'green'
                }
              },
              '这里是文本节点'
            )
          ]
        ),
        h(
          'div',
          {
            style: {
              color: 'red'
            }
          },
          [
            h(
              'div',
              {
                style: {
                  color: 'green'
                }
              },
              '这里是文本节点'
            )
          ]
        )
      ]
    )
    let elem = document.createElement('div')
    render(vnode, elem)

    console.log(elem)
  }
}
</script>
